<script lang="js" setup name="MainToolbar">
import { ref, reactive, computed, onMounted } from "vue";
import ToolbarButton from "@/components/ToolbarButton.vue";
import LayoutWnd from "../components/LayoutWnd.vue";
import tbButtons from "../actions/tbButtons.js";
import { useAppStore } from "../stores/appStore.js";
import { storeToRefs } from "pinia";

const appStore = useAppStore();
const { layout } = storeToRefs(appStore);
const layoutWnd = ref(null);
const layoutWndPos = reactive({ x: 0, y: 0 });
const emit = defineEmits(["action"]);
const btnRefs = reactive({});
const getBtnRef = (el, name) => {
    if (el) {
        btnRefs[name] = el;
    }
};

const mouseButtons = ["tbbScroll", "tbbMove", "tbbZoom", "tbbWindow", "tbbMeasure"];

const tb2dButtons = computed(() => {
    return tbButtons.filter(btn => btn.owner.includes("2d"));
});

const initMouseButtons = () => {
    btnRefs.tbbScroll.setMouse(appStore.toolBindings.scroll);
    btnRefs.tbbMeasure.setMouse(appStore.toolBindings.measure);
    btnRefs.tbbMove.setMouse(appStore.toolBindings.pan);
    btnRefs.tbbZoom.setMouse(appStore.toolBindings.zoom);
    btnRefs.tbbWindow.setMouse(appStore.toolBindings.window);
};

const updateToolBindings = () => {
    appStore.toolBindings.scroll = btnRefs.tbbScroll.getMouse();
    appStore.toolBindings.pan = btnRefs.tbbMove.getMouse();
    appStore.toolBindings.zoom = btnRefs.tbbZoom.getMouse();
    appStore.toolBindings.window = btnRefs.tbbWindow.getMouse();
    appStore.toolBindings.measure = btnRefs.tbbMeasure.getMouse();
    appStore.toolBindings.measureType = btnRefs.tbbMeasure.getBtnInfo().id;

};

const layoutStyle = computed(() => {
    return {
        top: `${layoutWndPos.y}px`,
        left: `${layoutWndPos.x}px`
    };
});

const showLayoutWnd = (rect) => {
    layoutWndPos.x = rect.x;
    layoutWndPos.y = rect.y + rect.height;
    layoutWnd.value.show();
};
const onLayout = (r, c) => {
	console.log("onLayout", r, c);
	// layout.row = r;
	// layout.col = c;
    // emit("layout", { row: r, col: c });
    emit("action", { name: "layout", row: r, col: c });
};


const onAction = (action, evt, rect) => {
    // console.log("onAction:", action, evt, rect);

    if (evt) {
        // console.log("buttons:", evt.buttons, action.name);
        if (mouseButtons.includes(action.name)) {
            mouseButtons.forEach(btnName => {
                if (btnName !== action.name) {
                    btnRefs[btnName].updateMouse(0, evt.buttons);
                } else {
                    btnRefs[btnName].updateMouse(evt.buttons, 0);
                }
            });

            updateToolBindings();
        }
    }

    switch (action.id) {
        case "load-folder":
            emit("action", { name: "openFolder" });
            break;
        case "load-pacs":
            emit("action", { name: "openPacs" });
            break;
        case "layout":
            showLayoutWnd(rect);
            break;
        case "wwwl-default":
        case "wwwl-ct-bone":
        case "wwwl-ct-lung":
        case "wwwl-ct-abdomen":
        case "wwwl-ct-angio":
        case "wwwl-ct-brain":
        case "wwwl-ct-chest":
            emit("action", { name: "setWindow", wl: action.data.windowCenter, ww: action.data.windowWidth });
            break;
        case "Probe":
        case "MyProbe":
        case "Length":
        case "Angle":
        case "RectangleROI":
        case "EllipticalROI":
        case "PlanarFreehandROI":
        case "CardiothoracicRatio":
        case "CobbAngle":
        case "Label":
        case "Label-L":
        case "Label-R":
        case "Eraser":
            if (evt === undefined) {
                appStore.toolBindings.measureType = action.id;
            }
            break;
        case "text-showtext":
            appStore.showCornerText = !appStore.showCornerText;
            break;
        case "text-dicomtag":
            emit ("action", { name: "dcmtag" });
            break;
        case "crossline":
            emit ("action", { name: "crossline", checked: action.checked });
            break;
        case "pseudo1":
        case "pseudo2":
        case "pseudo3":
        case "pseudo4":
        case "pseudo5":
        case "pseudo6":
        case "ClearPseudoColor":
            emit("action", { name: "colorMap", value: action.data });
            break;
        case "flip-cw":
            emit("action", { name: "rotate", value: 90 });
            break;
        case "flip-ccw":
            emit("action", { name: "rotate", value: -90 });
            break;
        case "flip-mirrorH":
            emit ("action", { name: "flipH" });
            break;
        case "flip-mirrorV":
            emit ("action", { name: "flipV" });
            break;
        case "view-invert":
            emit ("action", { name: "invert" });
            break;
        case "reset":
            emit ("action", { name: "resetCamera" });
            break;
        case "theme":
            if (appStore.theme === "light") {
                appStore.theme = "dark";
            } else {
                appStore.theme = "light";
            }
            break;
        case "navbar":
            emit("action", { name: "changeNavPos"});
            break;
        case "toolbar":
            break;
        case "threed":
            emit ("action", { name: "mprvr" });
            break;
    }
};

onMounted(() => {
    // console.log("MainToolbar mounted:");
    initMouseButtons();
});
</script>

<template>
	<div class="toolbar">
		<LayoutWnd ref="layoutWnd" :style="layoutStyle" @layout="onLayout" />
		<ToolbarButton
			v-for="btn in tb2dButtons"
			:key="btn.id"
			:btnInfo="btn"
			:ref="el => getBtnRef(el, btn.name)"
			@action="onAction"
		/>
	</div>
</template>

<style lang="scss" scoped>
.toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 2px;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	border-bottom: 1px solid grey;
}
</style>
